<template>
	<view class="container">
		<view class="v-tab">
			<view class="v-tab-container">
				<view class="v-tab-left" :class="datas.TabIndex === 1 ? 'v-tab-active' : ''" @click="tabClick(1)">抢购买单
				</view>
				<view class="v-tab-right" :class="datas.TabIndex === 2 ? 'v-tab-active' : ''" @click="tabClick(2)">抢购卖单
				</view>
			</view>
			<view class="v-tab-content">
				<view class="v-order-status-item"
					:class="datas.OrderState === item.Key ? 'v-order-status-item-active' : ''"
					v-for="(item, index) in datas.BuyStatus" v-if="datas.TabIndex === 1"
					@click="changeOrderState(item)">
					<uni-badge class="uni-badge-left-margin" v-if="item.Count != 0" :text="item.Count"
						absolute="rightTop" :offset="[-3, -3]" size="small">
						{{ item.Value }}
					</uni-badge>
					<view v-if="item.Count == 0">{{ item.Value }}</view>
				</view>
				<view class="v-order-status-item"
					:class="datas.OrderState === item.Key ? 'v-order-status-item-active' : ''"
					v-for="(item, index) in datas.SellStatus" v-if="datas.TabIndex === 2"
					@click="changeOrderState(item)">
					<uni-badge class="uni-badge-left-margin" v-if="item.Count != 0" :text="item.Count"
						absolute="rightTop" :offset="[-3, -3]" size="small">
						{{ item.Value }}
					</uni-badge>
					<view v-if="item.Count == 0">{{ item.Value }}</view>
				</view>
			</view>
		</view>
		<view class="v-orders">
			<view class="v-order-item-summary">
				金额小计：{{getOrderSummary()}}
			</view>
			<view class="v-order-item" v-for="(item, index) in datas.Orders">
				<view class="v-order-item-left">
					<image :src="getServerPath(item.ImageUrl)" mode="aspectFill"></image>
				</view>
				<view class="v-order-item-right">
					<view class="v-order-title">
						{{ item.Title }}
					</view>
					<view class="v-order-item-right-group" style="margin-bottom: 10rpx;">
						{{item.SellerName||""}} => {{item.BuierName}}
					</view>
					<view class="v-order-item-right-group">
						<view class="v-order-item-right-group-left">
							<view class="v-order-originalprice">￥{{ item.OriginalPrice }}</view>
							<view class="v-order-price">￥{{ item.Price }}</view>
						</view>
						<view class="v-order-item-right-group-right">
							<view class="v-order-item-op-active" v-if="datas.TabIndex == 1 && item.State == 1"
								@click="updateOrderState(item, 4)">付款</view>
							<view class="v-order-item-op-cancel" v-if="datas.TabIndex == 1 && item.State == 1"
								@click="updateOrderState(item, 5)">取消</view>

							<!-- <view class="v-order-item-op-active" v-if="datas.TabIndex == 2 && item.State == 4"
								@click="updateOrderState(item, 11)">寄售</view> -->
						</view>
					</view>
				</view>

				<view class="v-order-status-container">
					<view class="v-order-status-buy" :class="getOrderStateColor(item)"></view>
					<text class="v-order-status-text">{{ getOrderStateText(item) }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="datas.loadStatus"></uni-load-more>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from '../../common/util.js';
	export default {
		data() {
			return {
				datas: {
					messageText: '',
					msgType: 'success',
					duration: 2000,

					StatisticInfo_Summary: {},
					TabIndex: 1, //1:买单 2:卖单
					OrderState: 0,
					BuyStatus: [{
							Key: 0,
							Value: '全部',
							Count: '0'
						},
						{
							Key: 1,
							Value: '待付款',
							Count: '0'
						},
						{
							Key: 2,
							Value: '待发货',
							Count: '0'
						},
						{
							Key: 3,
							Value: '待收货',
							Count: '0'
						},
						{
							Key: 4,
							Value: '已完成',
							Count: '0'
						},

						{
							Key: 5,
							Value: '已取消',
							Count: '0'
						}
					],
					SellStatus: [{
							Key: 0,
							Value: '全部',
							Count: '0'
						},
						{
							Key: 4,
							Value: '待寄售',
							Count: '0'
						},
						{
							Key: 11,
							Value: '交易中',
							Count: '0'
						},
						{
							Key: 12,
							Value: '已完成',
							Count: '0'
						}
					],
					Orders: [
						// {
						// 	Id: '0000-000-000-0000',
						// 	OrderNo: '202404070001',
						// 	ProductId: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒干红葡萄酒干红葡萄酒干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Price: '2889.36',
						// 	OriginalPrice: '3899.99',
						// 	State: 1,
						// 	QiangGouTime: '2024-04-05 12:23',
						// 	PaymentTime: '2024-04-05 12:23',
						// 	CreateTime: '2024-04-05 12:23',
						// 	SellerId: '000-000-0000-0000',
						// 	SellerName: '张三',
						// 	BuierId: '000-000-0000-0000',
						// 	BuierName: '李四',
						// 	OrderType: 1 //1:买单 2:卖单
						// },
					],
					queryContent: '',
					totalPage: 0,
					currentPage: 1,
					pageRow: 5,
					loadStatus: 'more'
				}
			};
		},
		methods: {
			getOrderSummary() {
				let _this = this;
				console.log(_this.datas.StatisticInfo_Summary)
				switch (_this.datas.OrderState) {
					case 0:
						return _this.datas.StatisticInfo_Summary.QB || 0.0;
					case 1:
						return _this.datas.StatisticInfo_Summary.DFK || 0.0;
					case 2:
						return _this.datas.StatisticInfo_Summary.DFH || 0.0;
					case 3:
						return _this.datas.StatisticInfo_Summary.DSH || 0.0;
					case 4:
						return _this.datas.StatisticInfo_Summary.YWC_DJS || 0.0;
					case 5:
						return _this.datas.StatisticInfo_Summary.YQX || 0.0;
					case 11:
						return _this.datas.StatisticInfo_Summary.JYZ || 0.0;
					case 12:
						return _this.datas.StatisticInfo_Summary.YWC || 0.0;
					default:
						break;
				}
			},
			getOrderStateText: function(item) {
				let _this = this;
				switch (item.State) {
					case 1:
						return '待付款';
					case 2:
						return '待发货';
					case 3:
						return '待收货';
					case 4:
						if (_this.datas.TabIndex === 1) {
							return '已完成';
						} else {
							return '待寄售';
						}
					case 5:
						return '已取消';
					case 11:
						return '交易中';
					case 12:
						return '已完成';
					default:
						break;
				}
			},
			getOrderStateColor: function(item) {
				let _this = this;
				switch (item.State) {
					case 1:
						return 'state_color_blue';
					case 2:
						return '';
					case 3:
						return '';
					case 4:
						if (_this.datas.TabIndex === 1) {
							return 'state_color_green';
						} else {
							return 'state_color_blue';
						}
					case 5:
						return '已取消';
					case 11:
						return 'state_color_yellow';
					case 12:
						return 'state_color_green';
					default:
						break;
				}
			},
			dialogConfirm() {
				console.log('点击确认');
				let _this = this;
				_this.updateOrderState_Post();
			},
			dialogClose() {
				console.log('点击关闭');
			},
			getServerPath: function(url) {
				let _this = this;
				console.log(`${_this.sysInfo.ImageBasePath}${url}`);
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},

			loadOrders: function() {
				console.log('loadOrders');

				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					PageSize: _this.datas.pageRow,
					PageIndex: _this.datas.currentPage,
					OrderState: _this.datas.OrderState,
					OrderType: _this.datas.TabIndex,
					QueryContent: _this.datas.queryContent
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'RushPurchase/GetOrderDatas',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						Authorization: `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res);
							res.data.Data.Datas.forEach((item) => {
								_this.datas.Orders.push(item);
							});
							_this.datas.totalPage = res.data.Data.TotalPage;
							if (_this.datas.TabIndex === 1) {
								_this.datas.BuyStatus[0].Count = res.data.Data.StatisticInfo.QB || '0';
								_this.datas.BuyStatus[1].Count = res.data.Data.StatisticInfo.DFK || '0';
								_this.datas.BuyStatus[2].Count = res.data.Data.StatisticInfo.DFH || '0';
								_this.datas.BuyStatus[3].Count = res.data.Data.StatisticInfo.DSH || '0';
								_this.datas.BuyStatus[4].Count = res.data.Data.StatisticInfo.YWC_DJS ||
									'0';
								_this.datas.BuyStatus[5].Count = res.data.Data.StatisticInfo.YQX || '0';
							} else if (_this.datas.TabIndex === 2) {
								_this.datas.SellStatus[0].Count = res.data.Data.StatisticInfo.QB || '0';
								_this.datas.SellStatus[1].Count = res.data.Data.StatisticInfo.YWC_DJS ||
									'0';
								_this.datas.SellStatus[2].Count = res.data.Data.StatisticInfo.JYZ || '0';
								_this.datas.SellStatus[3].Count = res.data.Data.StatisticInfo.YWC || '0';
							}
							_this.datas.StatisticInfo_Summary = res.data.Data.StatisticInfo_Summary;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载订单信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载订单信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
				uni.stopPullDownRefresh();
				if (_this.datas.currentPage >= _this.datas.totalPage) {
					_this.datas.loadStatus = 'noMore';
				} else {
					_this.datas.loadStatus = 'more';
				}
			},
			tabClick: function(index) {
				let _this = this;
				_this.datas.TabIndex = index;
				_this.datas.OrderState = 0;
				this.datas.Orders = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.loadOrders();
			},
			changeOrderState: function(item) {
				let _this = this;
				_this.datas.OrderState = item.Key;
				this.datas.Orders = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.loadOrders();
			},
			updateOrderState: function(item, state) {
				let _this = this;
				_this.curItem = JSON.parse(JSON.stringify(item));
				_this.curItem.State = state;
				var tip = '';
				if (state === 4) {
					tip = '确定要付款吗？';
				} else if (state === 5) {
					tip = '确定要取消吗？';
				} else if (state === 11) {
					tip = '确定要寄售吗？';
				}
				this.dialogMsg = tip;
				this.$refs.alertDialog.open();
			},
			updateOrderState_Post: function() {
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();

				var queryData = _this.curItem;
				uni.request({
					url: _this.sysInfo.BasePath + 'RushPurchase/ChangeOrderState',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						Authorization: `${authToken}`
					},
					success: (res) => {
						if (res && res.data) {

							console.log(res);
							if (res.data.Succeeded === true) {
								this.datas.Orders = [];
								// _this.datas.queryContent = '';
								_this.datas.currentPage = 1;
								_this.datas.totalPage = 0;
								_this.loadOrders();
							} else {
								_this.sysUtils.tip({
									sender: _this,

									title: '更改订单状态失败！'+res.data.Errors,
									icon: 'error'
								});
							}
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '更改订单状态失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '更改订单状态失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
				_this.curItem = null;
			},
			init: function() {
				console.log('init');
				let _this = this;
				this.datas.Orders = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.datas.OrderState = 0;
				_this.loadOrders();
			}
		},
		onReachBottom() {
			console.log('onReachBottom');
			let _this = this;

			if (_this.datas.currentPage >= _this.datas.totalPage) {
				_this.datas.loadState = 'noMore';
				return;
			} else {
				_this.datas.currentPage = _this.datas.currentPage + 1;
				_this.loadOrders();
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			let _this = this;
			this.datas.Orders = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			_this.loadOrders();
		},
		onShow() {
			let _this = this;
			_this.init();
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: '/pages/account/login'
				});
			});
			// _this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		overflow-x: hidden;
	}

	.v-tab {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 20rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		position: fixed;
		background-color: #fff;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 99;

		box-shadow: 0rpx 5rpx 5rpx #dfdfdf;
	}

	.v-tab-container {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		height: 100rpx;
	}

	.v-tab-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
		border-bottom: solid 1rpx #c93a00ff;
		cursor: pointer;
	}

	.v-tab-right {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
		border-bottom: solid 1rpx #c93a00ff;
		cursor: pointer;
	}

	.v-tab-active {
		border-bottom: none;
		border-top: solid 1rpx #c93a00ff;
		border-left: solid 1rpx #c93a00ff;
		border-right: solid 1rpx #c93a00ff;
		border-radius: 20rpx 20rpx 0 0;
		color: #c93a00ff;
	}

	.v-tab-content {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 100rpx;
	}

	.v-order-status-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		margin-right: 10rpx;
		cursor: pointer;
		width: 120rpx;
		height: 50rpx;
	}

	.v-order-status-item-active {
		background-color: #c93a00ff;
		width: 120rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50rpx;
	}

	.v-orders {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 20rpx;
		margin-top: 220rpx;
	}

	.v-order-item-summary {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.v-order-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		height: 200rpx;
		margin-bottom: 20rpx;
		position: relative;
		box-shadow: 0rpx 5rpx 10rpx #999;
	}

	.v-order-item-left {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		width: 200rpx;
	}

	.v-order-item-left image {
		width: 200rpx;
		height: 100%;
	}

	.v-order-item-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin: 10rpx;
		flex: 1;
	}

	.v-order-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex: 1;
		font-size: 26rpx;
	}

	.v-order-item-right-group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.v-order-item-right-group-left {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: stretch;
	}

	.v-order-originalprice {
		font-size: 26rpx;
		text-decoration: line-through;
		color: #999;
	}

	.v-order-price {
		font-size: 32rpx;
		color: #ff5343;
		font-weight: bold;
	}

	.v-order-item-right-group-right {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		font-size: 26rpx;
	}

	.v-order-item-op-active {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #c93a00ff;
		color: #fff;
		font-size: 26rpx;
		padding: 10rpx;
		width: 100rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		cursor: pointer;
	}

	.v-order-item-op-cancel {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
		font-size: 26rpx;
		padding: 10rpx;
		width: 100rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.v-order-status-container {
		position: absolute;
		top: 0;
		right: 0;
	}

	.v-order-status-sell {
		width: 0;
		height: 0;
		border-left: 55rpx solid transparent;
		/* 左边框 */
		border-right: 55rpx solid #9869ff;
		/* 右边框 */
		border-top: 55rpx solid #9869ff;
		/* 下边框，这里可以设置你想要的颜色 */
		border-bottom: 55rpx solid transparent;
		/* 下边框，这里可以设置你想要的颜色 */
	}

	.v-order-status-buy {
		width: 0;
		height: 0;
		border-left: 55rpx solid transparent;
		/* 左边框 */
		border-right: 55rpx solid #00a9f2;
		/* 右边框 */
		border-top: 55rpx solid #00a9f2;
		/* 下边框，这里可以设置你想要的颜色 */
		border-bottom: 55rpx solid transparent;
		/* 下边框，这里可以设置你想要的颜色 */
	}

	.v-order-status-text {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 20rpx;
		margin-right: 0rpx;
		transform: rotate(45deg);
		font-size: 26rpx;
		color: #fff;
	}

	.state_color_blue {
		/* 左边框 */
		border-right: 55rpx solid #00a9f2 !important;
		/* 右边框 */
		border-top: 55rpx solid #00a9f2 !important;
	}

	.state_color_green {
		/* 左边框 */
		border-right: 55rpx solid #005500 !important;
		/* 右边框 */
		border-top: 55rpx solid #005500 !important;
	}

	.state_color_yellow {
		/* 左边框 */
		border-right: 55rpx solid #ffaa00 !important;
		/* 右边框 */
		border-top: 55rpx solid #ffaa00 !important;
	}
</style>